<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input allowClear v-model="name" placeholder="请输入商品名称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="商品分类">
                <a-cascader
                  :options="catList"
                  @change="onCascaderChange"
                  :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
                  placeholder="请选择商品分类"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-button type="primary" @click="$refs.goodsTable.tablePageChange(1)"> 查询 </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="onChange">
          <a-radio-button :value="-1"> 全部 </a-radio-button>
          <a-radio-button :value="1"> 已上架 </a-radio-button>
          <a-radio-button :value="0"> 已下架 </a-radio-button>
        </a-radio-group>
        <a-row type="flex" justify="end">
          <a-button type="primary" icon="plus" @click="addGodds">添加商品</a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="updateAll('status', 1)"> 批量上架 </a-menu-item>
              <a-menu-item key="2" @click="updateAll('status', 0)"> 批量下架 </a-menu-item>
              <a-menu-item key="3" @click="updateAll('is_delete', 1)"> 批量删除 </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </a-row>
      </div>
      <!-- 商品列表 -->
      <GoodsTable ref="goodsTable" :queryParam="queryParam" :name="name" :catId="cat_id"></GoodsTable>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import GoodsTable from './components/GoodsTable.vue'
import { getGoods } from '@/api/orderMeal'

export default {
  name: '',
  components: {
    GoodsTable,
  },

  data() {
    return {
      columns: [
        {
          title: '商品ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '产品名称',
          dataIndex: 'name',
          key: 'name',
          width: 200,
          scopedSlots: { customRender: 'goods_name' },
        },
        {
          title: '售价',
          dataIndex: 'price',
          key: 'price',
          defaultSortOrder: '',
          sorter: (a, b) => a.price - b.price,
          scopedSlots: { customRender: 'price' },
        },
        {
          title: '库存',
          dataIndex: 'goods_num',
          key: 'goods_num',
          defaultSortOrder: '',
          sorter: (a, b) => a.goods_num - b.goods_num,
          scopedSlots: { customRender: 'goods_num' },
        },
        {
          title: '上下架',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [],
      selectedRowKeys: [],
      totalCount: 0,
      pageSize: 10,
      pageNo: 1,
      loading: false,
      currentRowId: '',
      showSetting: false,
      goodsInfo: {},
      plainOptions: [
        {
          value: 'shop',
          label: '到店自提',
        },
        {
          value: 'send',
          label: '同城配送',
        },
      ],
      form: this.$form.createForm(),
      currentGoodsItem: {},
      updateParams: {
        name: '',
        price: null,
        virtual_sales: null,
        goods_num: null,
      },
      showNamePopover: false,
      showPricePopover: false,
      showRestPopover: false,
      showVirtualPopover: false,
      queryParam: {
        status: -1,
      },

      name: '',
      cat_id: '',
      catList: [],
    }
  },

  methods: {
    onCascaderChange(val) {
      this.cat_id = val[val.length - 1]
    },

    // tab切换
    tabChange(e) {
      if (e == 0) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },

    // 鼠标滑出表格
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },

    // 表格选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    // 点击新建商品
    addGodds() {
      this.$router.push({ name: 'AddOrderGoods' })
    },

    updateAll(type, status) {
      this.$refs.goodsTable.updateAll(type, status)
    },
  },

  async mounted() {
    const res = await getGoods()
    if (!res.code) {
      this.catList = res.data.cat
    }
  },
}
</script>
<style lang="less" scoped>
.goods-info {
  display: flex;
  align-items: flex-start;
  position: relative;
  .goods-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
  }
  .info-box {
    margin-left: 24px;
    margin-right: 5px;
    .goods-name {
      width: 185px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .item-edit-box {
    width: 15px;
    height: 100%;
    position: absolute;
    right: -12px;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
